<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sprite - p5.play</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="stylesheet" href="../assets/css/custom.css">
    <link rel="stylesheet" href="../assets/css/lucid.css">
    <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
</head>
<body class="yui3-skin-sam">
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <h1 class="brand" style="padding: 10px 16px 10px; height: 20px; line-height: 20px; margin-left: 0;">
	    <img alt="p5.play" src="../../asterisk.png" style="max-height: 65%;" title="p5.play">
            p5.play
        </h1>
	<div class="nav">
            <li class="divider-vertical"></li>
            <li>
                <p class="navbar-text">
                    API Docs for Version: <b>1.0.0</b>
                </p>
            </li>
        </div>
        <form class="navbar-form pull-right" style="line-height: 40px; height: 40px;">
            <input style="margin-top: 0;" type="text" class="search-query" placeholder="Search for classes/modules..." data-obj='["classes/Animation", "classes/Camera", "classes/Group", "classes/p5.play", "classes/Sprite", "modules/p5.play"]'>
        </form>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="span3">
	    <div>
	        <div id="sidebar">
	        <div id="classes">
	            <ul id="api-classes" class="nav nav-list">
	                    <li><a href="../classes/Animation.html">Animation</a></li>
	                    <li><a href="../classes/Camera.html">Camera</a></li>
	                    <li><a href="../classes/Group.html">Group</a></li>
	                    <li><a href="../classes/p5.play.html">p5.play</a></li>
	                    <li><a href="../classes/Sprite.html">Sprite</a></li>
	            </ul>
	        </div>
	        </div>
	    </div>
        </div>
        <div class="span9">
                <form id="options-form" class="form-inline pull-right">
                    Show:
                    <label for="api-show-inherited" class="checkbox">
                        <input type="checkbox" id="api-show-inherited" checked>
                        Inherited
                    </label>
            
                    <label for="api-show-protected" class="checkbox">
                        <input type="checkbox" id="api-show-protected">
                        Protected
                    </label>
            
                    <label for="api-show-private" class="checkbox">
                        <input type="checkbox" id="api-show-private">
                        Private
                    </label>
                    <label for="api-show-deprecated" class="checkbox">
                        <input type="checkbox" id="api-show-deprecated">
                        Deprecated
                    </label>
            
                </form>
            
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <div class="page-header">
                            <h1>Sprite</h1>
                        </div>
                        
                        
                        
                        	<div class="well well-small">
                                    Module: <a href="../modules/p5.play.html">p5.play</a><br>
                                    Parent Module: <a href="../modules/p5.play.html">p5.play</a>
                            </div>
                        
                        
                        
                        <div class="yuidoc-class-description">
                        <p>A Sprite is the main building block of p5.play:
                        an element able to store images or animations with a set of
                        properties such as position and visibility.
                        A Sprite can have a collider that defines the active area to detect
                        collisions or overlappings with other sprites and mouse interactions.</p>
                        
                        </div>
                        
                        <!-- table of contents -->
                        
                        <div id="class-toc" class="page-section">
                        	<h2>Table of Contents</h2>
                            <ul>
                        		<li>
                        			<strong>Methods</strong>
                        			<ul>
                        				<li><a href="#method-addAnimation"><span class="im">addAnimation</span>(<span class="ia">label</span><span class="ia">animation</span>)</a></li>
                        				<li><a href="#method-addImage"><span class="im">addImage</span>(<span class="ia">label</span><span class="ia">img</span>)</a></li>
                        				<li><a href="#method-addSpeed"><span class="im">addSpeed</span>(<span class="ia">speed</span><span class="ia">angle</span>)</a></li>
                        				<li><a href="#method-addToGroup"><span class="im">addToGroup</span>(<span class="ia">group</span>)</a></li>
                        				<li><a href="#method-attractionPoint"><span class="im">attractionPoint</span>(<span class="ia">magnitude</span><span class="ia">pointX</span><span class="ia">pointY</span>)</a></li>
                        				<li><a href="#method-bounce"><span class="im">bounce</span>(<span class="ia">target</span><span class="ia">callback</span>)</a></li>
                        				<li><a href="#method-changeAnimation"><span class="im">changeAnimation</span>(<span class="ia">label</span>)</a></li>
                        				<li><a href="#method-changeImage"><span class="im">changeImage</span>(<span class="ia">label</span>)</a></li>
                        				<li><a href="#method-collide"><span class="im">collide</span>(<span class="ia">target</span><span class="ia">callback</span>)</a></li>
                        				<li><a href="#method-displace"><span class="im">displace</span>(<span class="ia">target</span><span class="ia">callback</span>)</a></li>
                        				<li><a href="#method-draw"><span class="im">draw</span>()</a></li>
                        				<li><a href="#method-getAnimationLabel"><span class="im">getAnimationLabel</span>()</a></li>
                        				<li><a href="#method-getDirection"><span class="im">getDirection</span>()</a></li>
                        				<li><a href="#method-limitSpeed"><span class="im">limitSpeed</span>(<span class="ia">max</span>)</a></li>
                        				<li><a href="#method-mirrorX"><span class="im">mirrorX</span>(<span class="ia">dir</span>)</a></li>
                        				<li><a href="#method-mirrorY"><span class="im">mirrorY</span>(<span class="ia">dir</span>)</a></li>
                        				<li><a href="#method-overlap"><span class="im">overlap</span>(<span class="ia">target</span><span class="ia">callback</span>)</a></li>
                        				<li><a href="#method-overlapPixel"><span class="im">overlapPixel</span>(<span class="ia">pointX</span><span class="ia">pointY</span>)</a></li>
                        				<li><a href="#method-overlapPoint"><span class="im">overlapPoint</span>(<span class="ia">pointX</span><span class="ia">pointY</span>)</a></li>
                        				<li><a href="#method-remove"><span class="im">remove</span>()</a></li>
                        				<li><a href="#method-setCollider"><span class="im">setCollider</span>(<span class="ia">type</span><span class="ia">offsetX</span><span class="ia">offsetY</span><span class="ia">width</span><span class="ia">height</span>)</a></li>
                        				<li><a href="#method-setSpeed"><span class="im">setSpeed</span>(<span class="ia">speed</span><span class="ia">angle</span>)</a></li>
                        				<li><a href="#method-setVelocity"><span class="im">setVelocity</span>(<span class="ia">x</span><span class="ia">x</span>)</a></li>
                        				<li><a href="#method-setVelocity"><span class="im">setVelocity</span>()</a></li>
                        				<li><a href="#method-update"><span class="im">update</span>()</a></li>
                        			</ul>
                        		</li>
                        
                        		<li>
                        			<strong>Properties</strong>
                        			<ul>
                        				<li><a href="#prop-animation"><span class="ip">animation</span></a></li>
                        				<li><a href="#prop-camera"><span class="ip">camera</span></a></li>
                        				<li><a href="#prop-collider"><span class="ip">collider</span></a></li>
                        				<li><a href="#prop-debug"><span class="ip">debug</span></a></li>
                        				<li><a href="#prop-depth"><span class="ip">depth</span></a></li>
                        				<li><a href="#prop-friction"><span class="ip">friction</span></a></li>
                        				<li><a href="#prop-groups"><span class="ip">groups</span></a></li>
                        				<li><a href="#prop-height"><span class="ip">height</span></a></li>
                        				<li><a href="#prop-immovable"><span class="ip">immovable</span></a></li>
                        				<li><a href="#prop-mass"><span class="ip">mass</span></a></li>
                        				<li><a href="#prop-maxSpeed"><span class="ip">maxSpeed</span></a></li>
                        				<li><a href="#prop-mouseActive"><span class="ip">mouseActive</span></a></li>
                        				<li><a href="#prop-mouseIsOver"><span class="ip">mouseIsOver</span></a></li>
                        				<li><a href="#prop-mouseIsPressed"><span class="ip">mouseIsPressed</span></a></li>
                        				<li><a href="#prop-originalHeight"><span class="ip">originalHeight</span></a></li>
                        				<li><a href="#prop-originalWidth"><span class="ip">originalWidth</span></a></li>
                        				<li><a href="#prop-position"><span class="ip">position</span></a></li>
                        				<li><a href="#prop-previousPosition"><span class="ip">previousPosition</span></a></li>
                        				<li><a href="#prop-removed"><span class="ip">removed</span></a></li>
                        				<li><a href="#prop-removed"><span class="ip">removed</span></a></li>
                        				<li><a href="#prop-restitution"><span class="ip">restitution</span></a></li>
                        				<li><a href="#prop-rotateToDirection"><span class="ip">rotateToDirection</span></a></li>
                        				<li><a href="#prop-rotation"><span class="ip">rotation</span></a></li>
                        				<li><a href="#prop-rotationSpeed"><span class="ip">rotationSpeed</span></a></li>
                        				<li><a href="#prop-scale"><span class="ip">scale</span></a></li>
                        				<li><a href="#prop-shapeColor"><span class="ip">shapeColor</span></a></li>
                        				<li><a href="#prop-touching"><span class="ip">touching</span></a></li>
                        				<li><a href="#prop-velocity"><span class="ip">velocity</span></a></li>
                        				<li><a href="#prop-visible"><span class="ip">visible</span></a></li>
                        				<li><a href="#prop-width"><span class="ip">width</span></a></li>
                        			</ul>
                        		</li>
                        
                        
                        	</ul>
                        </div>
                        
                        <!-- details -->
                        
                            <div class="constructor yuidoc-class-constructor page-section">
                                <h2>Constructor</h2>
                                <div class="item-list">
                                <div id="method-Sprite" class="method item">
                                	<div class="method-signature">
                                	<span class="name"><code>Sprite</code></span>
                                
                                		<div class="args">
                                			<span class="paren">(</span><ul class="args-list inline commas">
                                				<li class="arg">
                                						<code>x</code>
                                				</li>
                                				<li class="arg">
                                						<code>y</code>
                                				</li>
                                				<li class="arg">
                                						<code>width</code>
                                				</li>
                                				<li class="arg">
                                						<code>height</code>
                                				</li>
                                			</ul><span class="paren">)</span>
                                		</div>
                                	</div>
                                
                                
                                
                                
                                
                                
                                	<div class="meta">
                                				<p>
                                				Defined in
                                		<a href="../files/lib_p5.play.js.html#l625"><code>lib&#x2F;p5.play.js:625</code></a>
                                		</p>
                                
                                
                                
                                	</div>
                                
                                
                                		<div class="params">
                                			<h4>Parameters:</h4>
                                
                                			<ul class="params-list">
                                				<li class="param">
                                						<code class="param-name">x</code>
                                						<span class="type">Number</span>
                                
                                
                                					<div class="param-description"><p>Initial x coordinate</p>
                                </div>
                                
                                				</li>
                                				<li class="param">
                                						<code class="param-name">y</code>
                                						<span class="type">Number</span>
                                
                                
                                					<div class="param-description"><p>Initial y coordinate</p>
                                </div>
                                
                                				</li>
                                				<li class="param">
                                						<code class="param-name">width</code>
                                						<span class="type">Number</span>
                                
                                
                                					<div class="param-description"><p>Width of the placeholder rectangle and of the
                                collider until an image or new collider are set</p>
                                </div>
                                
                                				</li>
                                				<li class="param">
                                						<code class="param-name">height</code>
                                						<span class="type">Number</span>
                                
                                
                                					<div class="param-description"><p>Height of the placeholder rectangle and of the
                                collider until an image or new collider are set</p>
                                </div>
                                
                                				</li>
                                			</ul>
                                		</div>
                                
                                
                                </div>
                                </div>
                            </div>
                        
                            <div id="methods" class="page-section">
                                <h2 class="off-left">Methods</h2>
                                <div class="item-list">
                                    <div id="method-addAnimation" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>addAnimation</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>label</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>animation</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1568"><code>lib&#x2F;p5.play.js:1568</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Adds an animation to the sprite.
                                    The animation should be preloaded in the preload() function
                                    using loadAnimation.
                                    Animations require a identifying label (string) to change them.
                                    Animations are stored in the sprite but not necessarily displayed
                                    until Sprite.changeAnimation(label) is called.</p>
                                    <p>Usage:</p>
                                    <ul>
                                    <li>sprite.addAnimation(label, animation);</li>
                                    </ul>
                                    <p>Alternative usages. See Animation for more information on file sequences:</p>
                                    <ul>
                                    <li>sprite.addAnimation(label, firstFrame, lastFrame);</li>
                                    <li>sprite.addAnimation(label, frame1, frame2, frame3...);</li>
                                    </ul>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">label</code>
                                    						<span class="type">String</span>
                                    
                                    
                                    					<div class="param-description"><p>Animation identifier</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">animation</code>
                                    						<span class="type"><a href="../classes/Animation.html" class="crosslink">Animation</a></span>
                                    
                                    
                                    					<div class="param-description"><p>The preloaded animation</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-addImage" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>addImage</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>label</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code class="optional">img</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1540"><code>lib&#x2F;p5.play.js:1540</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Adds an image to the sprite.
                                    An image will be considered a one-frame animation.
                                    The image should be preloaded in the preload() function using p5 loadImage.
                                    Animations require a identifying label (string) to change them.
                                    The image is stored in the sprite but not necessarily displayed
                                    until Sprite.changeAnimation(label) is called</p>
                                    <p>Usages:</p>
                                    <ul>
                                    <li>sprite.addImage(label, image);</li>
                                    <li>sprite.addImage(image);</li>
                                    </ul>
                                    <p>If only an image is passed no label is specified</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">label</code>
                                    						<span class="type">String  |  p5.Image</span>
                                    
                                    
                                    					<div class="param-description"><p>Label or image</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name optional">[img]</code>
                                    						<span class="type">p5.Image</span>
                                    						<span class="flag optional" title="This parameter is optional.">optional</span>
                                    
                                    
                                    					<div class="param-description"><p>Image</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-addSpeed" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>addSpeed</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>speed</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>angle</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1510"><code>lib&#x2F;p5.play.js:1510</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Pushes the sprite in a direction defined by an angle.
                                    The force is added to the current velocity.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">speed</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Scalar speed to add</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">angle</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Direction in degrees</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-addToGroup" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>addToGroup</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>group</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1463"><code>lib&#x2F;p5.play.js:1463</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Adds the sprite to an existing group</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">group</code>
                                    						<span class="type">Object</span>
                                    
                                    
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-attractionPoint" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>attractionPoint</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>magnitude</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>pointX</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>pointY</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1524"><code>lib&#x2F;p5.play.js:1524</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Pushes the sprite toward a point.
                                    The force is added to the current velocity.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">magnitude</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Scalar speed to add</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">pointX</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Direction x coordinate</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">pointY</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Direction y coordinate</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-bounce" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>bounce</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>target</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code class="optional">callback</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    		<span class="returns-inline">
                                    			<span class="type">Boolean</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1845"><code>lib&#x2F;p5.play.js:1845</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Checks if the the sprite is overlapping another sprite or a group.
                                    If the overlap is positive the sprites will bounce affecting each
                                    other's trajectories depending on their .velocity, .mass and .restitution</p>
                                    <p>The check is performed using the colliders. If colliders are not set
                                    they will be created automatically from the image/animation bounding box.</p>
                                    <p>A callback function can be specified to perform additional operations
                                    when the collision occours.
                                    If the target is a group the function will be called for each single
                                    sprite colliding. The parameter of the function are respectively the
                                    current sprite and the colliding sprite.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">target</code>
                                    						<span class="type">Object</span>
                                    
                                    
                                    					<div class="param-description"><p>Sprite or group to check against the current one</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name optional">[callback]</code>
                                    						<span class="type">Function</span>
                                    						<span class="flag optional" title="This parameter is optional.">optional</span>
                                    
                                    
                                    					<div class="param-description"><p>The function to be called if overlap is positive</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Boolean</span>:
                                    					<p>True if overlapping</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    		<div class="example">
                                    			<h4>Example:</h4>
                                    
                                    			<div class="example-content">
                                    				<p><code>
                                    sprite.bounce(otherSprite, explosion);</p>
                                    <p>function explosion(spriteA, spriteB) {
                                    spriteA.remove();
                                    spriteB.score++;
                                    }
                                    </code></p>
                                    
                                    			</div>
                                    		</div>
                                    </div>
                                    <div id="method-changeAnimation" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>changeAnimation</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>label</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1660"><code>lib&#x2F;p5.play.js:1660</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Changes the displayed animation.
                                    See Animation for more control over the sequence.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">label</code>
                                    						<span class="type">String</span>
                                    
                                    
                                    					<div class="param-description"><p>Animation identifier</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-changeImage" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>changeImage</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>label</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1639"><code>lib&#x2F;p5.play.js:1639</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Changes the displayed image/animation.
                                    Equivalent to changeAnimation</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">label</code>
                                    						<span class="type">String</span>
                                    
                                    
                                    					<div class="param-description"><p>Image/Animation identifier</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-collide" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>collide</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>target</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code class="optional">callback</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    		<span class="returns-inline">
                                    			<span class="type">Boolean</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1778"><code>lib&#x2F;p5.play.js:1778</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Checks if the the sprite is overlapping another sprite or a group.
                                    If the overlap is positive the current sprite will be displace by
                                    the colliding one in the closest non-overlapping position.</p>
                                    <p>The check is performed using the colliders. If colliders are not set
                                    they will be created automatically from the image/animation bounding box.</p>
                                    <p>A callback function can be specified to perform additional operations
                                    when the collision occours.
                                    If the target is a group the function will be called for each single
                                    sprite colliding. The parameter of the function are respectively the
                                    current sprite and the colliding sprite.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">target</code>
                                    						<span class="type">Object</span>
                                    
                                    
                                    					<div class="param-description"><p>Sprite or group to check against the current one</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name optional">[callback]</code>
                                    						<span class="type">Function</span>
                                    						<span class="flag optional" title="This parameter is optional.">optional</span>
                                    
                                    
                                    					<div class="param-description"><p>The function to be called if overlap is positive</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Boolean</span>:
                                    					<p>True if overlapping</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    		<div class="example">
                                    			<h4>Example:</h4>
                                    
                                    			<div class="example-content">
                                    				<p><code>
                                    sprite.collide(otherSprite, explosion);</p>
                                    <p>function explosion(spriteA, spriteB) {
                                    spriteA.remove();
                                    spriteB.score++;
                                    }
                                    </code></p>
                                    
                                    			</div>
                                    		</div>
                                    </div>
                                    <div id="method-displace" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>displace</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>target</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code class="optional">callback</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    		<span class="returns-inline">
                                    			<span class="type">Boolean</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1812"><code>lib&#x2F;p5.play.js:1812</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Checks if the the sprite is overlapping another sprite or a group.
                                    If the overlap is positive the current sprite will displace
                                    the colliding one to the closest non-overlapping position.</p>
                                    <p>The check is performed using the colliders. If colliders are not set
                                    they will be created automatically from the image/animation bounding box.</p>
                                    <p>A callback function can be specified to perform additional operations
                                    when the collision occours.
                                    If the target is a group the function will be called for each single
                                    sprite colliding. The parameter of the function are respectively the
                                    current sprite and the colliding sprite.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">target</code>
                                    						<span class="type">Object</span>
                                    
                                    
                                    					<div class="param-description"><p>Sprite or group to check against the current one</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name optional">[callback]</code>
                                    						<span class="type">Function</span>
                                    						<span class="flag optional" title="This parameter is optional.">optional</span>
                                    
                                    
                                    					<div class="param-description"><p>The function to be called if overlap is positive</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Boolean</span>:
                                    					<p>True if overlapping</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    		<div class="example">
                                    			<h4>Example:</h4>
                                    
                                    			<div class="example-content">
                                    				<p><code>
                                    sprite.displace(otherSprite, explosion);</p>
                                    <p>function explosion(spriteA, spriteB) {
                                    spriteA.remove();
                                    spriteB.score++;
                                    }
                                    </code></p>
                                    
                                    			</div>
                                    		</div>
                                    </div>
                                    <div id="method-draw" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>draw</code></span>
                                    
                                    		<span class="paren">()</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1383"><code>lib&#x2F;p5.play.js:1383</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Manages the visuals of the sprite.
                                    It can be overridden with a custom drawing function.
                                    The 0,0 point will be the center of the sprite.
                                    Example:
                                    sprite.draw = function() { ellipse(0,0,10,10) }
                                    Will display the sprite as circle.</p>
                                    </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="method-getAnimationLabel" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>getAnimationLabel</code></span>
                                    
                                    		<span class="paren">()</span>
                                    		<span class="returns-inline">
                                    			<span class="type">String</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1650"><code>lib&#x2F;p5.play.js:1650</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Returns the label of the current animation</p>
                                    </div>
                                    
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">String</span>:
                                    					<p>label Image/Animation identifier</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    </div>
                                    <div id="method-getDirection" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>getDirection</code></span>
                                    
                                    		<span class="paren">()</span>
                                    		<span class="returns-inline">
                                    			<span class="type">Number</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1448"><code>lib&#x2F;p5.play.js:1448</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Calculates the movement's direction in degrees.</p>
                                    </div>
                                    
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Number</span>:
                                    					<p>Angle in degrees</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    </div>
                                    <div id="method-limitSpeed" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>limitSpeed</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>max</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1476"><code>lib&#x2F;p5.play.js:1476</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Limits the scalar speed.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">max</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Max speed: positive number</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-mirrorX" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>mirrorX</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>dir</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    		<span class="returns-inline">
                                    			<span class="type">Number</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1295"><code>lib&#x2F;p5.play.js:1295</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Sets the sprite's horizontal mirroring.
                                    If 1 the images displayed normally
                                    If -1 the images are flipped horizontally
                                    If no argument returns the current x mirroring</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">dir</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Either 1 or -1</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Number</span>:
                                    					<p>Current mirroring if no parameter is specified</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    </div>
                                    <div id="method-mirrorY" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>mirrorY</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>dir</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    		<span class="returns-inline">
                                    			<span class="type">Number</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1312"><code>lib&#x2F;p5.play.js:1312</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Sets the sprite's vertical mirroring.
                                    If 1 the images displayed normally
                                    If -1 the images are flipped vertically
                                    If no argument returns the current y mirroring</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">dir</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Either 1 or -1</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Number</span>:
                                    					<p>Current mirroring if no parameter is specified</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    </div>
                                    <div id="method-overlap" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>overlap</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>target</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code class="optional">callback</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    		<span class="returns-inline">
                                    			<span class="type">Boolean</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1747"><code>lib&#x2F;p5.play.js:1747</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Checks if the the sprite is overlapping another sprite or a group.
                                    The check is performed using the colliders. If colliders are not set
                                    they will be created automatically from the image/animation bounding box.</p>
                                    <p>A callback function can be specified to perform additional operations
                                    when the overlap occours.
                                    If the target is a group the function will be called for each single
                                    sprite overlapping. The parameter of the function are respectively the
                                    current sprite and the colliding sprite.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">target</code>
                                    						<span class="type">Object</span>
                                    
                                    
                                    					<div class="param-description"><p>Sprite or group to check against the current one</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name optional">[callback]</code>
                                    						<span class="type">Function</span>
                                    						<span class="flag optional" title="This parameter is optional.">optional</span>
                                    
                                    
                                    					<div class="param-description"><p>The function to be called if overlap is positive</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Boolean</span>:
                                    					<p>True if overlapping</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    		<div class="example">
                                    			<h4>Example:</h4>
                                    
                                    			<div class="example-content">
                                    				<p><code>
                                    sprite.overlap(otherSprite, explosion);</p>
                                    <p>function explosion(spriteA, spriteB) {
                                    spriteA.remove();
                                    spriteB.score++;
                                    }
                                    </code></p>
                                    
                                    			</div>
                                    		</div>
                                    </div>
                                    <div id="method-overlapPixel" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>overlapPixel</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>pointX</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>pointY</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    		<span class="returns-inline">
                                    			<span class="type">Boolean</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1677"><code>lib&#x2F;p5.play.js:1677</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Checks if the given point corresponds to a transparent pixel
                                    in the sprite's current image. It can be used to check a point collision
                                    against only the visible part of the sprite.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">pointX</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>x coordinate of the point to check</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">pointY</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>y coordinate of the point to check</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Boolean</span>:
                                    					<p>result True if non-transparent</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    </div>
                                    <div id="method-overlapPoint" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>overlapPoint</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>pointX</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>pointY</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    		<span class="returns-inline">
                                    			<span class="type">Boolean</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1714"><code>lib&#x2F;p5.play.js:1714</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Checks if the given point is inside the sprite's collider.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">pointX</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>x coordinate of the point to check</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">pointY</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>y coordinate of the point to check</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Boolean</span>:
                                    					<p>result True if inside</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    </div>
                                    <div id="method-remove" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>remove</code></span>
                                    
                                    		<span class="paren">()</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1408"><code>lib&#x2F;p5.play.js:1408</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Removes the Sprite from the sketch.
                                    The removed Sprite won't be drawn or updated anymore.</p>
                                    </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="method-setCollider" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>setCollider</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>type</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>offsetX</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>offsetY</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>width</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>height</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1231"><code>lib&#x2F;p5.play.js:1231</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Sets a collider for the sprite.</p>
                                    <p>In p5.play a Collider is an invisible circle or rectangle
                                    that can have any size or position relative to the sprite and which
                                    will be used to detect collisions and overlapping with other sprites,
                                    or the mouse cursor.</p>
                                    <p>If the sprite is checked for collision, bounce, overlapping or mouse events a
                                    collider is automatically created from the width and height parameter passed at the
                                    creation of the sprite or the from the image dimension in case of animate sprites.</p>
                                    <p>Often the image bounding box is not appropriate as active area for
                                    a collision detection so you can set a circular or rectangular sprite with different
                                    dimensions and offset from the sprite's center.</p>
                                    <p>setCollider</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">type</code>
                                    						<span class="type">String</span>
                                    
                                    
                                    					<div class="param-description"><p>Either "rectangle" or "circle"</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">offsetX</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Collider x position from the center of the sprite</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">offsetY</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Collider y position from the center of the sprite</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">width</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Collider width or radius</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">height</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Collider height</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-setSpeed" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>setSpeed</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>speed</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>angle</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1496"><code>lib&#x2F;p5.play.js:1496</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Set the speed and direction of the sprite.
                                    The action overwrites the current velocity.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">speed</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Scalar speed to add</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">angle</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Direction in degrees</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-setVelocity" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>setVelocity</code></span>
                                    
                                    		<div class="args">
                                    			<span class="paren">(</span><ul class="args-list inline commas">
                                    				<li class="arg">
                                    						<code>x</code>
                                    				</li>
                                    				<li class="arg">
                                    						<code>x</code>
                                    				</li>
                                    			</ul><span class="paren">)</span>
                                    		</div>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1426"><code>lib&#x2F;p5.play.js:1426</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Sets the velocity vector.</p>
                                    </div>
                                    
                                    		<div class="params">
                                    			<h4>Parameters:</h4>
                                    
                                    			<ul class="params-list">
                                    				<li class="param">
                                    						<code class="param-name">x</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>X component</p>
                                    </div>
                                    
                                    				</li>
                                    				<li class="param">
                                    						<code class="param-name">x</code>
                                    						<span class="type">Number</span>
                                    
                                    
                                    					<div class="param-description"><p>Y component</p>
                                    </div>
                                    
                                    				</li>
                                    			</ul>
                                    		</div>
                                    
                                    
                                    </div>
                                    <div id="method-setVelocity" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>setVelocity</code></span>
                                    
                                    		<span class="paren">()</span>
                                    		<span class="returns-inline">
                                    			<span class="type">Number</span>
                                    		</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l1438"><code>lib&#x2F;p5.play.js:1438</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Calculates the scalar speed.</p>
                                    </div>
                                    
                                    
                                    		<div class="returns">
                                    			<h4>Returns:</h4>
                                    
                                    			<div class="returns-description">
                                    						<span class="type">Number</span>:
                                    					<p>Scalar speed</p>
                                    
                                    			</div>
                                    		</div>
                                    
                                    </div>
                                    <div id="method-update" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>update</code></span>
                                    
                                    		<span class="paren">()</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l983"><code>lib&#x2F;p5.play.js:983</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Updates the sprite.
                                    Called automatically at the beginning of the draw cycle.</p>
                                    </div>
                                    
                                    
                                    
                                    </div>
                                </div>
                            </div>
                        
                            <div id="properties" class="page-section">
                                <h2 class="off-left">Properties</h2>
                        
                                <div class="item-list">
                                    <div id="prop-animation" class="property item">
                                        <h3 class="name"><code>animation</code></h3>
                                        <span class="type"><a href="../classes/Animation.html" class="crosslink">Animation</a></span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l975"><code>lib&#x2F;p5.play.js:975</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Reference to the current animation.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-camera" class="property item">
                                        <h3 class="name"><code>camera</code></h3>
                                        <span class="type"><a href="../classes/Camera.html" class="crosslink">Camera</a></span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l2139"><code>lib&#x2F;p5.play.js:2139</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>The sketch camera automatically created at the beginning of a sketch.
                                    A camera facilitates scrolling and zooming for scenes extending beyond
                                    the canvas. A camera has a position, a zoom factor, and the mouse
                                    coordinates relative to the view.</p>
                                    <p>In p5.js terms the camera wraps the whole drawing cycle in a
                                    transformation matrix but it can be disable anytime during the draw
                                    cycle for example to draw interface elements in an absolute position.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-collider" class="property item">
                                        <h3 class="name"><code>collider</code></h3>
                                        <span class="type">Object</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l700"><code>lib&#x2F;p5.play.js:700</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>The sprite's current collider.
                                    It can either be an Axis Aligned Bounding Box (a non-rotated rectangle)
                                    or a circular collider.
                                    If the sprite is checked for collision, bounce, overlapping or mouse events the
                                    collider is automatically created from the width and height parameter passed at the
                                    creation of the sprite or the from the image dimension in case of animate sprites</p>
                                    <p>You can set a custom collider with Sprite.setCollider</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-debug" class="property item">
                                        <h3 class="name"><code>debug</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l944"><code>lib&#x2F;p5.play.js:944</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>If set to true, draws an outline of the collider, the depth, and center.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> false</p>
                                    
                                    
                                    </div>
                                    <div id="prop-depth" class="property item">
                                        <h3 class="name"><code>depth</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l807"><code>lib&#x2F;p5.play.js:807</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Determines the rendering order within a group: a sprite with
                                    lower depth will appear below the ones with higher depth.</p>
                                    <p>Note: drawing a group before another with drawSprites will make
                                    its members appear below the second one, like in normal p5 canvas
                                    drawing.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 0</p>
                                    
                                    
                                    </div>
                                    <div id="prop-friction" class="property item">
                                        <h3 class="name"><code>friction</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l689"><code>lib&#x2F;p5.play.js:689</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Friction factor, reduces the sprite's velocity.
                                    The friction should be close to 1 (eg. 0.99)
                                    1: no friction</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> -1</p>
                                    
                                    
                                    </div>
                                    <div id="prop-groups" class="property item">
                                        <h3 class="name"><code>groups</code></h3>
                                        <span class="type">Array</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l962"><code>lib&#x2F;p5.play.js:962</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Groups the sprite belongs to, including allSprites</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-height" class="property item">
                                        <h3 class="name"><code>height</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l888"><code>lib&#x2F;p5.play.js:888</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Height of the sprite's current image.
                                    If no images or animations are set it's the height of the
                                    placeholder rectangle.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 100</p>
                                    
                                    
                                    </div>
                                    <div id="prop-immovable" class="property item">
                                        <h3 class="name"><code>immovable</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l749"><code>lib&#x2F;p5.play.js:749</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>If set to true the sprite won't bounce or be displaced by collisions
                                    Simulates an infinite mass or an anchored object.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> false</p>
                                    
                                    
                                    </div>
                                    <div id="prop-mass" class="property item">
                                        <h3 class="name"><code>mass</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l738"><code>lib&#x2F;p5.play.js:738</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>The mass determines the velocity transfer when sprites bounce
                                    against each other. See Sprite.bounce
                                    The higher the mass the least the sprite will be affected by collisions.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 1</p>
                                    
                                    
                                    </div>
                                    <div id="prop-maxSpeed" class="property item">
                                        <h3 class="name"><code>maxSpeed</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l679"><code>lib&#x2F;p5.play.js:679</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Set a limit to the sprite's scalar speed regardless of the direction.
                                    The value can only be positive. If set to -1, there's no limit.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> -1</p>
                                    
                                    
                                    </div>
                                    <div id="prop-mouseActive" class="property item">
                                        <h3 class="name"><code>mouseActive</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l844"><code>lib&#x2F;p5.play.js:844</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>If set to true sprite will track its mouse state.
                                    the properties mouseIsPressed and mouseIsOver will be updated.
                                    Note: automatically set to true if the functions
                                    onMouseReleased or onMousePressed are set.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> false</p>
                                    
                                    
                                    </div>
                                    <div id="prop-mouseIsOver" class="property item">
                                        <h3 class="name"><code>mouseIsOver</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l856"><code>lib&#x2F;p5.play.js:856</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>True if mouse is on the sprite's collider.
                                    Read only.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-mouseIsPressed" class="property item">
                                        <h3 class="name"><code>mouseIsPressed</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l865"><code>lib&#x2F;p5.play.js:865</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>True if mouse is pressed on the sprite's collider.
                                    Read only.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-originalHeight" class="property item">
                                        <h3 class="name"><code>originalHeight</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l913"><code>lib&#x2F;p5.play.js:913</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Unscaled height of the sprite
                                    If no images or animations are set it's the height of the
                                    placeholder rectangle.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 100</p>
                                    
                                    
                                    </div>
                                    <div id="prop-originalWidth" class="property item">
                                        <h3 class="name"><code>originalWidth</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l902"><code>lib&#x2F;p5.play.js:902</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Unscaled width of the sprite
                                    If no images or animations are set it's the width of the
                                    placeholder rectangle.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 100</p>
                                    
                                    
                                    </div>
                                    <div id="prop-position" class="property item">
                                        <h3 class="name"><code>position</code></h3>
                                        <span class="type">p5.Vector</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l645"><code>lib&#x2F;p5.play.js:645</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>The sprite's position of the sprite as a vector (x,y).</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-previousPosition" class="property item">
                                        <h3 class="name"><code>previousPosition</code></h3>
                                        <span class="type">p5.Vector</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l652"><code>lib&#x2F;p5.play.js:652</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>The sprite's position at the beginning of the last update as a vector (x,y).</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-removed" class="property item">
                                        <h3 class="name"><code>removed</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l924"><code>lib&#x2F;p5.play.js:924</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>False if the sprite has been removed.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-removed" class="property item">
                                        <h3 class="name"><code>removed</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l932"><code>lib&#x2F;p5.play.js:932</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Cycles before self removal.
                                    Set it to initiate a countdown, every draw cycle the property is
                                    reduced by 1 unit. At 0 it will call a sprite.remove()
                                    Disabled if set to -1.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> -1</p>
                                    
                                    
                                    </div>
                                    <div id="prop-restitution" class="property item">
                                        <h3 class="name"><code>restitution</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l762"><code>lib&#x2F;p5.play.js:762</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Coefficient of restitution. The velocity lost after bouncing.
                                    1: perfectly elastic, no energy is lost
                                    0: perfectly inelastic, no bouncing
                                    &lt;1: inelastic, this is the most common in nature</p>
                                    <blockquote>
                                    <p>1: hyper elastic, energy is increased like in a pinball bumper</p>
                                    </blockquote>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 1</p>
                                    
                                    
                                    </div>
                                    <div id="prop-rotateToDirection" class="property item">
                                        <h3 class="name"><code>rotateToDirection</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l796"><code>lib&#x2F;p5.play.js:796</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Automatically set the rotation of the visual element
                                    (image or animation) to the sprite's movement direction.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> false</p>
                                    
                                    
                                    </div>
                                    <div id="prop-rotation" class="property item">
                                        <h3 class="name"><code>rotation</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l775"><code>lib&#x2F;p5.play.js:775</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Rotation in degrees of the visual element (image or animation)
                                    Note: this is not the movement's direction, see getDirection.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 0</p>
                                    
                                    
                                    </div>
                                    <div id="prop-rotationSpeed" class="property item">
                                        <h3 class="name"><code>rotationSpeed</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l785"><code>lib&#x2F;p5.play.js:785</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Rotation change in degrees per frame of thevisual element (image or animation)
                                    Note: this is not the movement's direction, see getDirection.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 0</p>
                                    
                                    
                                    </div>
                                    <div id="prop-scale" class="property item">
                                        <h3 class="name"><code>scale</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l821"><code>lib&#x2F;p5.play.js:821</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Determines the sprite's scale.
                                    Example: 2 will be twice the native size of the visuals,
                                    0.5 will be half. Scaling up may make images blurry.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 1</p>
                                    
                                    
                                    </div>
                                    <div id="prop-shapeColor" class="property item">
                                        <h3 class="name"><code>shapeColor</code></h3>
                                        <span class="type">Color</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l953"><code>lib&#x2F;p5.play.js:953</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>If no image or animations are set this is color of the
                                    placeholder rectangle</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-touching" class="property item">
                                        <h3 class="name"><code>touching</code></h3>
                                        <span class="type">Object</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l721"><code>lib&#x2F;p5.play.js:721</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Object containing information about the most recent collision/overlapping
                                    To be typically used in combination with Sprite.overlap or Sprite.collide
                                    functions.
                                    The properties are touching.left, touching.right, touching.top,
                                    touching.bottom and are either true or false depending on the side of the
                                    collider.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-velocity" class="property item">
                                        <h3 class="name"><code>velocity</code></h3>
                                        <span class="type">p5.Vector</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l670"><code>lib&#x2F;p5.play.js:670</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>The sprite's velocity as a vector (x,y)
                                    Velocity is speed broken down to its vertical and horizontal components.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-visible" class="property item">
                                        <h3 class="name"><code>visible</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l835"><code>lib&#x2F;p5.play.js:835</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>The sprite's visibility.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> true</p>
                                    
                                    
                                    </div>
                                    <div id="prop-width" class="property item">
                                        <h3 class="name"><code>width</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l874"><code>lib&#x2F;p5.play.js:874</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Width of the sprite's current image.
                                    If no images or animations are set it's the width of the
                                    placeholder rectangle.</p>
                                    
                                        </div>
                                    
                                            <p><strong>Default:</strong> 100</p>
                                    
                                    
                                    </div>
                                </div>
                            </div>
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/jquery/jquery-1.8.2.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/js/yuidoc-bootstrap.js"></script>
<script>prettyPrint();</script>
</body>
</html>
